<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色列表</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="./../../CSS/layerPopup.css">
    <style>
        .userManage_body{
            background-color: rgb(255, 255, 255);
            width: 80%;
            margin: 20px auto;
            overflow-x: hidden;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em{
            background-color: #1E9FFF !important;
        }
        .layui-table-page{
            text-align: right;
        }
        .layui-laypage-prev i:hover,
        .layui-laypage-next i:hover{
            color: #1E9FFF !important;
        }
    </style>
</head>
<body>
    <div class="userManage_body">
        <table class="layui-hide" id="UserTab" lay-filter="useruv"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
              <button class="layui-btn layui-btn-normal" lay-event="increase" id="increase">新增角色</button>
            </div>
          </script>
        <script type="text/html" id="operate">
            <!-- 这里的 checked 的状态只是演示 -->
            <a class='layui-btn layui-btn-sm layui-btn-normal'  lay-event="rEdit">修改</a>
            <a class='layui-btn layui-btn-sm layui-btn-danger' lay-event="rDel">删除</a>
        </script>
    </div>
    <!-- 新增角色 -->
    <div id="addRole" style="display: none;">
        <div class="layui-form" style="margin-top: 8px;box-sizing: border-box;padding-right: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                <input id="rName" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色权限</label>
                <div class="layui-input-block">
                <div id="role" class="xm-select-demo"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色描述</label>
                <div class="layui-input-block">
                    <textarea id="rDes" placeholder="请输入角色描述" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="rSub" class="layui-btn layui-btn-normal" lay-submit="" >确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改角色 -->
    <div id="modifyRole" style="display: none;">
        <div class="layui-form" style="margin-top: 8px;box-sizing: border-box;padding-right: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                <input id="rmName" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色权限</label>
                <div class="layui-input-block">
                <div id="Mrole" class="xm-select-demo"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色描述</label>
                <div class="layui-input-block">
                    <textarea id="rMDes" placeholder="请输入角色描述" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="rMSub" class="layui-btn layui-btn-normal" lay-submit="" >确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 存放点击用户修改时拿到的id -->
    <input id="saveId" type="hidden" value="">
</body>
<script src="../../JS/jquery-2.0.3.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../layui/lay/modules/layer.js"></script>
<script src="./../../JS/xm-select.js"></script>
<script>

var rINdex = null;
var layer,
    form,
    table;
    // 新增多选下拉
    var role = xmSelect.render({
		el: '#role',
        tips: '请选择权限?',  //palcehoder
        theme:{
            color:'#1E9FFF'    
        },
        autoRow:true,       //自动换行
		data: [],
        
    })
    // 修改多选下拉
    var Mrole = xmSelect.render({
		el: '#Mrole',
        tips: '请选择权限?',  //palcehoder
        theme:{
            color:'#1E9FFF'    
        },
        autoRow:true,       //自动换行
		data: [],  
    })
    parent.ajaxGet(parent.defaultUrl+'/auth_list', '', function (res) { 
                for(var i=0;i<res.data.length;i++){
                    for(var key in res.data[i]){
                        res.data[i].value=res.data[i].id;
                    }
                }
                Mrole.update({
                     data:res.data,
                })
            })
//渲染用户信息表格
layui.use(['table','form','layer'], function () {
    table = layui.table;
    layer = layui.layer;
    form= layui.form;
    table.render({
        elem: '#UserTab'
        // , url: '../../JSON/UserInfo.json'
        ,url: parent.defaultUrl+'/role_list'
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: []
        ,method:'post'
        ,contentType:'application/json'
        ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [ 'prev', 'page', 'next', 'skip','limit', 'count',] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:10 //一页显示多少条
                ,limits:[5,10,15]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页
        }
        ,where:{
            ispage: true,
        }
        ,parseData: function(res){
            // console.log(res)
            for(var i=0;i<res.data.length;i++){
                for(var key in res.data[i]){
                        var str='';
                        var aa='';
                        for(var j=0;j<res.data[i].permissions.length;j++){
                            for(var k in res.data[i].permissions[j]){
                                aa = res.data[i].permissions[j].name
                            }
                            if(aa == ''){
                                str += aa
                            }else{
                                str += aa +'、'
                            }
                        }
                    res.data[i].per = str;
                }
            }
            
            return {
                'code': 0, //解析接口状态
                'msg': '', //解析提示文本
                'count': res.totle, //解析数据长度
                'data': res.data //解析数据列表
            };
        }
        // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
            {field: 'id', title: '角色ID', sort: true,align: 'center',width:200,}
            , {field: 'role', title: '角色名称',align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
            , {field: 'per', title: '角色权限',align: 'center'}
            , {field: 'description', title: '角色描述',align: 'center'}
            ,{field:'operate', title:'操作', align: 'center',toolbar:"#operate", width:200,}
        ]]
    });
      //头工具栏事件
    table.on('toolbar(useruv)', function(obj){
        switch(obj.event){
        case 'increase':
            parent.ajaxGet(parent.defaultUrl+'/auth_list', '', function (res) { 
                for(var i=0;i<res.data.length;i++){
                    for(var key in res.data[i]){
                        res.data[i].value=res.data[i].id;
                    }
                }
                role.update({
                     data:res.data,
                })
            })
            rINdex = layer.open({
                    type:1,
                    skin: 'layerCls',
                    title: ['新增角色', 'font-size:18px;color:#fff;'],
                    content:$("#addRole"),
                    area: ['480px', '330px'],
            })
        break;
        };
    });
    table.on('tool(useruv)', function(obj){
        // var data = obj.data;
        if(obj.event === 'rEdit'){
            // 角色权限赋值
            for(var i=0;i<obj.data.permissions.length;i++){
                for(var key in obj.data.permissions[i]){
                    obj.data.permissions[i].value = obj.data.permissions[i].id
                }
            }
            if(obj.data.permissions[0] !=null){
                Mrole.setValue(obj.data.permissions)
            }
            // 角色名称
            $('#rmName').val(obj.data.role)
            // 角色描述
            $('#rMDes').val(obj.data.description)
            // 存放id
            $('#saveId').val(obj.data.id)
            rINdex = layer.open({
                    type:1,
                    skin: 'layerCls',
                    title: ['修改角色', 'font-size:18px;color:#fff;'],
                    content:$("#modifyRole"),
                    area: ['480px', '330px'],
            })           
        }else if(obj.event === 'rDel'){
            layer.confirm('确认删除？',{ skin : "layerCls"}, function(index){
                // console.log(obj.data.id)
                parent.ajaxGet(parent.defaultUrl +'/role_del',  {id:obj.data.id}, function (data) { 
                    parent.layer.msg('删除成功')
                 })
                obj.del();
                layer.close(index);
            });
        }
    })
});
// 新增角色提交
$('#rSub').click(function () { 
    var rName = $('#rName').val(); 
    var selArr = role.getValue();
    var rDes = $('#rDes').val();
    parent.ajaxPost(parent.defaultUrl+'/role_add', 
    {
        'role':rName,
        'description':rDes,
        'permissions':selArr,
    }
    , function (res) { 
        parent.layer.msg(res.message)
        layer.close(rINdex)
    })
 })
// 修改角色提交
$('#rMSub').click(function () { 
    var rmName = $('#rmName').val(); 
    var selArr = Mrole.getValue();
    var rMDes = $('#rMDes').val();
    var id = $('#saveId').val()
    debugger
    parent.ajaxPost(parent.defaultUrl+'/role_upt', 
    {
        'id':id,
        'role':rmName,
        'description':rMDes,
        'permissions':selArr,
    }
    , function (res) { 
        debugger
        parent.layer.msg(res.message)
        layer.close(rINdex)
    })
})
</script>
</html>